<template>
  <div class="monitor_page">
    <!-- table -->
    <el-card class="monitor_page-top" shadow="always">
      <div v-if="monitorInfo.monitorType === 3" class="radio_0">
        <el-radio-group v-model="radio" size="mini" @change="changeRadio">
          <el-radio-button label="挠度实时监测数据"></el-radio-button>
          <el-radio-button label="桥梁结构展示"></el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="monitorInfo.monitorType === 3 && radio== '挠度实时监测数据' || monitorInfo.monitorType !== 3">
        <div class="title_info">{{monitorInfo.name+'实时监测数据' +typeInfo}}
        </div>
        <div class="filter_header">
          <el-form ref="form" label-width="120px" style="display: inline-block;margin-right: 30px">
            <div class="monitor_page-filter">
              <el-form-item label="起止时间：">
                <el-date-picker
                  size="small"
                  style="width: 360px;background: transparent;"
                  value-format="timestamp"
                  v-model="timerArray"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-form>
          <el-button
            size="small"
            type="primary"
            class="common_btn-defalut"
            icon="el-icon-search"
            @click="searchRecord">筛选
          </el-button>
          <el-button
            style="color: #0beaeb;float: right;margin-top: 20px"
            size="small"
            type="text">
          </el-button>
        </div>
        <el-card class="card_echarts" shadow="hover">
          <echarts-three-change v-show="showCharts(3)" ref="echarts3"></echarts-three-change>
          <echarts-eight-change v-show="showCharts(8)" ref="echarts8"></echarts-eight-change>
          <echarts-ten-change v-show="showCharts(10)" ref="echarts10"></echarts-ten-change>
          <echarts-thirteen-change v-show="showCharts(13)" ref="echarts13"></echarts-thirteen-change>
        </el-card>
      </div>
      <div v-else style="height: 40vh;padding-top: 40px">
        <el-image style="width: 100%; height: 39vh;cursor:pointer;" :src="constUrl+pic[picNo]"
                  @click="previewImg(constUrl+pic[0])"></el-image>
      </div>
    </el-card>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
  import constUrl from '@/services/env'
  import EchartsEightChange from '../monitor-echarts/popup/echarts-8'
  import EchartsThreeChange from '../monitor-echarts/popup/echarts-3'
  import EchartsTenChange from '../monitor-echarts/popup/echarts-10'
  import EchartsThirteenChange from '../monitor-echarts/popup/echarts-13'
  import PictureViewer from '@/components/picture-viewer'

  import {
    openApiSearchRecord,
  } from '@/services/model/project-info'
  import {
    queryPointRule,
  } from '@/services/model/open_iframe'

  export default {
    props: {
      monitorInfo: {}
    },
    components: {
      PictureViewer,
      EchartsThreeChange,
      EchartsEightChange,
      EchartsTenChange,
      EchartsThirteenChange,
    },
    data() {
      return {
        picNo: 0,
        pic: ['/oss/upload/ptjtdq05.jpg', '/oss/upload/ptjdq.gif', '/oss/upload/ptjtdq06.jpg'],
        constUrl,
        radio: '桥梁结构展示',
        //时间选择器
        pickerOptions: {
          shortcuts: [{
            text: '最近1分钟',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近2分钟',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 2)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近3分钟',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 3)
              picker.$emit('pick', [start, end])
            }
          }],
          onPick: obj => {
            this.picerMinDate = new Date(obj.minDate).getTime()
          },
          disabledDate: time => {
            if (this.picerMinDate) {
              // 最多可选5分钟
              const LIMIT = 60 * 1000 * 5
              const maxTime = this.picerMinDate + LIMIT
              const minTime = this.picerMinDate - LIMIT
              return time.getTime() > maxTime || time.getTime() < minTime
            }
          }
        },
        // 当前的图表钩子
        chartsName: '',
        // 分页参数
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        timerArray: [],
        collectionList: [],
      }
    },
    computed: {
      //展示绘图
      showCharts() {
        return function (monitorType) {
          return this.monitorInfo.monitorType === monitorType
        }
      },
      typeInfo() {
        switch (this.monitorInfo.monitorType) {
          case 3:
            return '（位移传感器）'
          case 8:
            return '（倾角传感器）'
          case 10:
            return '（温湿度传感器）'
          case 13:
            return '（振动传感器）'
          default:
            return ' '
        }
      },
    },
    methods: {
      rotatePic() {
        this.picNo = 1
      },
      stopRotate() {
        this.picNo = 0
      },
      // 查看大图
      previewImg(url) {
        let list = [this.constUrl + this.pic[2]]
        this.$refs.imageViewer.showViewer(list, 0)
      },
      changeRadio(env) {
        if (env === '挠度实时监测数据') {
          this.initData()
        }
      },
      //查询数据
      async searchRecord() {
        let endTimer = this.timerArray[1]
        let startTimer = this.timerArray[0]
        //最近30秒数据
        startTimer = endTimer - startTimer > 30 * 1000 ? endTimer - 30 * 1000 : startTimer
        this.form.endCreateTime = endTimer
        //最多查3小时的数据
        this.form.startCreateTime = startTimer
        this.timerArray = [startTimer, endTimer]
        let res = await openApiSearchRecord(this.form)
        this.update(res.data || {}, this.monitorInfo.name)
      },
      // 设置预警值
      async setWarningLine(activeId) {
        let {data} = await queryPointRule({pointId: activeId})
        if (data && data.length) {
          this.$refs[this.chartsName].setWarningLine2(data)
        }
      },
      //初始化条件
      async initData() {
        let monitorInfo = this.monitorInfo
        this.monitorInfo = monitorInfo
        // 默认10秒数据
        const timer = 10 * 1000
        let endTimer = monitorInfo.collectionTime + 1000
        let startTimer = monitorInfo.collectionTime - timer
        // 结束时间加1s
        this.timerArray = [startTimer, endTimer]
        this.form = {
          monitorType: Number(monitorInfo.monitorType),
          endCreateTime: endTimer,
          startCreateTime: startTimer,
          pointId: monitorInfo.id,
        }
        this.searchRecord()
      },
      addData(type, data, sampleTime) {
        this.rotatePic()
        //拉线
        if (type === 3) {
          this.chartsName = 'echarts3'
          this.$refs.echarts3.addData(data, sampleTime)
          //倾角
        } else if (type === 8) {
          this.chartsName = 'echarts8'
          this.$refs.echarts8.addData(data, sampleTime)
          //温湿度
        } else if (type === 10) {
          this.chartsName = 'echarts10'
          this.$refs.echarts10.addData(data, sampleTime)
          //振动计
        } else if (type === 13) {
          this.chartsName = 'echarts13'
          this.$refs.echarts13.addData(data, sampleTime)
        }
      },
      // 数据刷新
      update(data, monitorName) {
        this.data = []
        //拉线
        if (this.monitorInfo.monitorType === 3) {
          this.chartsName = 'echarts3'
          this.$refs[this.chartsName].updateEchart(data, monitorName)
          //倾角
        } else if (this.monitorInfo.monitorType === 8) {
          this.chartsName = 'echarts8'
          this.$refs['echarts8'].updateEchart(data, monitorName)
          //温湿度
        } else if (this.monitorInfo.monitorType === 10) {
          this.chartsName = 'echarts10'
          this.$refs[this.chartsName].updateEchart(data, monitorName)
          //振动计
        } else if (this.monitorInfo.monitorType === 13) {
          this.chartsName = 'echarts13'
          this.$refs[this.chartsName].updateEchart(data, monitorName)
        }
        this.setWarningLine(this.monitorInfo.id)
      },
    },
    mounted() {
      this.initData()
    },
  }
</script>

<style scoped="scoped" lang="less">
  .monitor_page-top {
    height: 50%;
  }

  @import url('./commom.less');

  /deep/ .el-range-editor--small .el-range-input {
    font-size: 13px;
    color: #0beaeb !important;
    background: transparent;
  }

  // 还需自定义的css
  .card_echarts {
    height: 30vh;
  }

  .monitor_page-left {
    border: 1px solid #c00003;
  }

  .el-card {
    width: 100%;
    background: transparent;

    /deep/ .el-range-separator {
      color: #ffffff;
    }
  }

  .title_info {
    border-bottom: 1px solid #ffffff;
    padding: 10px 0;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 10px;
    font-family: YouSheBiaoTiHei;
  }

  .radio_0 {
    position: absolute;
    right: 20px;

    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #228AF5;
    }
  }
</style>
